<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>管理端</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<!--<script type="text/javascript" scr="/js/jquery.js" charset="UTF-8"></script>
	<script type="text/javascript" scr="/js/bootstrap.js" charset="UTF-8"></script>
	<link rel="stylesheet" href="/css/bootstrap.css">-->
	<link rel="stylesheet" href="/css/main.css">
</head>
<body>
	<div class="page-wrap" >
		<div class="page-menu" style="width:20%;float:left;">
			<ul class="nav nav-pills nav-stacked" id="nav">
				<li role="presentation" title="house"><a href="/admin/house" target="_self">房源</a></li>
				<li role="presentation" title="link"><a href="/admin/link" target="_self">友情链接管理</a></li>
				<li role="presentation" title="ad"><a href="/admin/ad" target="_self">广告管理</a></li>
				<li role="presentation" title="broker"><a href="/admin/broker" target="_self">经纪人管理</a></li>
			</ul>
		</div>
		<div class="page-content" style="width:78%;float:right;">
			<div class="navbar navbar-default">
				<form action="?" class="nav-form navbar-left" method="get">
					<div class="form-group form-groups">
						<button id="btn_add" type="button" class="btn btn-default  glyphicon glyphicon-plus bt">新建</button>
					</div>
					<div class="form-group form-groups">
						<button id="btn_del" type="button" class="btn btn-default glyphicon glyphicon-remove bt" >删除</button>
					</div>
					<div class="form-group form-groups" style="margin-left: 60px;">
						<input type="search" class="form-control search-text" name="keyword" value="<%=keyword%>">
					</div>
					<div class="form-group form-groups">
						<button type="submit" class="btn btn-default glyphicon glyphicon-search search-btn">搜素</button>
					</div>
				</form>
			</div>
			<ul class="pagination">
				<li ><a href="#">&laquo;</a></li>
				<!--刚开始后台传来的cur_page为1，start为负数-->
				<!--当end>总页数时,使其相等,这样不会出现多余的空页-->
				<%
					let start=cur_page-(show_page_count-1)/2;
					let   end=cur_page+(show_page_count-1)/2;
					if(start<1){
						start=1;
						}
					if(end>page_count){
						end=page_count;
					}
				
				for(let page=start;page<=end;page++) { %>
					<% if(page==cur_page){%>
					<li class="active"><a href="?page=<%=page%>"><%=page%></a></li>
					<!--if区分当前页和非当前页,?为当前页-->
					<% }else{ %>
					<li><a href="?page=<%=page%>"><%=page%></a></li>
				<% } %>
				<% } %>
				<li><a href="#">&raquo;</a></li>
			</ul>
			<div>
				<table class="table">
					<thead>
						<tr>
							<th>
								<label>
									<input type="checkbox">
									ID
								</label>
							</th>
							<% 
							for(let name in jsonShowName){ 
								if(name=='ID')continue;
							%>
							<th><%=jsonShowName[name]%></th>
							<% } %>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<% data.forEach(json=>{ %>
						<tr>
							<td>
								<label>
									<input type="checkbox" name="ID_check" value="<%=json.ID%>">
									<%=json.ID%>
								</label>
							</td>
							<% 
							for(let name in jsonShowName){ 
								if(name=='ID')continue;
							%>
							<th><%=json[name]%></th>
							<% } %>
							<td>
								<a href="#" onclick="mod_data('<%=json.ID%>')">编辑</a>
								<a href="/admin/<%=table%>/delete?id=<%=json.ID%>" onclick="return confirm('Are you sure delete there?')">删除</a>
							</td>
						</tr>
						<% }) %>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div id="shadow" class="shadow" style="display:none">
		<div class="dialog" id="dialog">
			<div class="panel panel-default panel-defaults">
				<div class="panel-heading">
					添加/修改
					<a href="#" id="btn_close" class="glyphicon glyphicon-remove pull-right"></a>
				</div>
			</div>

			<div class="panel-body" style="overflow:auto;">
				<form action="?" id="data_form" method="post" enctype="multipart/form-data">
					<input type="hidden" id="is_mod" name="is_mod" value="false">
					<input type="hidden" id="old_id" name="old_id" value="">
					<div id="form_contrainer"></div>
					<button type="submit" class="btns btn btn-info" style="margin-left:450px">提交</button>
					<button id="btn_cancel" type="button" class="btns btn btn-danger">取消</button>
				</form>
			</div>
		</div>
</div>

</body>
</html>
<script type="text/javascript" src="/js/form_datas.js"></script>
<script type="text/javascript">


	//const $=document.querySelectorAll.bind(document);

	let oShaow=$('#shadow')[0];
	let oDialog=$('#dialog')[0];
	let oBtnAdd=$('#btn_add')[0];
	let oBtnClose=$('#btn_close')[0];
	let oBtnCancel=$('#btn_cancel')[0];

	oBtnAdd.onclick=function(){
		//添加显示，顺便创建空表单
		oShaow.style.display='block';
		oDialog.style.display='block';

		createForm();
		$('#is_mod')[0].value="false";
		}
	oBtnClose.onclick=function(){
		oShaow.style.display='none';
		oDialog.style.display='none';
		};
	oBtnCancel.onclick=function(){
		oShaow.style.display='none';
		oDialog.style.display='none';
		};


const form_inputs=form_datas['<%=table%>']

let oFormContainer=$('#form_contrainer')[0];

function mod_data(id){
	$.ajax({//获取编辑数据
		//不同的table编辑请求不同的数据
		url:'/admin/<%=table%>/get_data',
		data:{id},
		dataType:'json',
		success(json){
			oShaow.style.display='block';
			oDialog.style.display='block';
			//把json作为参数传给createForm函数用来创建相应表单
			createForm(json);
			
			$('#is_mod')[0].value="true";
			$('#old_id')[0].value=id;
		},
		error(err){
			alert('数据出错')
		}
	})
	}

function createForm(old_data={}){
	//动态生成表单，编辑时会需要生成
	
	oFormContainer.innerHTML="";

	for(let i=0;i<form_inputs.length;i++){
		let oDiv=document.createElement('div');
		let data=form_inputs[i]
		oDiv.className='form-group';
		oDiv.innerHTML=
		`
			<label for="id${i}" class="col-sm-2 control-label">${data.title}</label>
			<div class="col-sm-10">
				<input type="${data.type}" ${data.multiple?'multiple':''} name="${data.name}" class="form-control" id="id${i}" placeholder="请输入${data.title}..." value="${old_data[data.name]||''}">
			</div>
		`;
		oFormContainer.appendChild(oDiv);
		//时间
		if(data.type=='date'){
			//把数据库传来的时间戳转化为XXXX-HH-MM格式
			function toDou(n){//设置为两位数
				return (parseInt(n)>=10)?(''+n):('0'+n);
			}
			if(old_data[data.name]&&old_data[data.name]!='0'){
				let oDate=new Date(old_data[data.name]*1000);
				let input=document.getElementById(`id${i}`)
			input.value=oDate.getFullYear()+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate());
			}
		 }
		
	}
	}

	//提交之前
	let oForm=$('#data_form')[0];
	oForm.onsubmit=function(){//动态操作表单
		form_inputs.forEach(json=>{
			if(json.type=='date'){
				let oInput=document.getElementsByName(json.name)[0];
				console.log(oInput);
				let time=Math.floor(new Date(oInput.value).getTime()/1000);
				let oNewInput=document.createElement('input');
				oNewInput.type="hidden";
				oInput.name="";
				oNewInput.name=json.name
				oNewInput.value=time;
				oFormContainer.appendChild(oNewInput)
			}
		})
		}

//删除
let oBtnDelBat=$('#btn_del')[0];
let aCheck=Array.from(document.getElementsByName('ID_check'));
//console.log(aCheck)
oBtnDelBat.onclick=function(){
	let arr=[];
	aCheck.forEach(ch=>{
		if(ch.checked){
			arr.push(ch.value)
		}

	});
	if(arr.length==0){
		alert('请选择东西')
	}else{
		let url=`/admin/house/delete?id=${encodeURIComponent(arr.join(','))}`;

	if(confirm(`您要删除这${arr.length}条数据吗`)){
		window.location=url;
	}
	}
	
	}

	//左侧导航栏
	let oNav=$('#nav')[0];
	Array.from(oNav.children).forEach(li=>{
		if(li.title=='<%=table%>'){
			li.className='active';
		}else{
			li.className='';
		}
	})
</script>